<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <MyLayout @toggle="changeLayput">
      <template #left>
        <div style="padding: 30px">
          <div
            class="pointer"
            v-if="currentIndex !== null && isShowArrow"
            :style="{ transform: `translate(${X + 30}px,${Y - 50}px)` }"
          >
            <arrow-left-outlined
              :style="{ fontSize: '20px', color: '#1890ff' }"
            />
          </div>
          <a-timeline
            :pending="`当前提案状态---[ ${codeList[currentIndex as number]?.title} ]`"
            @mouseleave="debounceHandleMouseOut"
            :reverse="true"
          >
            <a-timeline-item
              ref="timeLineRef"
              :color="item.color"
              @mouseover="throttleHandleMouseOver(index)"
              v-for="(item, index) in codeList"
              :key="item._id"
              @click="timeLineClick(index)"
            >
              <span
                class="timeline"
                :style="{
                  color:
                    scrollIndex === codeList.length - index - 1
                      ? '#1890ff'
                      : '',
                }"
              >
                {{ item.code === 100 ? "提案预览" : item.title }}
              </span>
              <template
                #dot
                v-if="
                  (!overture.determineRegister && item.code === 300) ||
                  index === currentIndex
                "
                ><ExclamationCircleOutlined
                  style="font-size: 18px; color: '#cf1322'"
              /></template>
              <template #dot v-if="index === currentIndex"
                ><ClockCircleOutlined style="font-size: 18px; color: '#1890ff'"
              /></template>
            </a-timeline-item>
          </a-timeline>
        </div>
      </template>
      <template #right>
        <div class="covetureBox">
          <div class="scroll" ref="scroll">
            <div
              class="scrollItem"
              ref="scrollItem"
              v-for="(item, index) in codeListReverse"
              :key="item._id"
            >
              <!-- 提案预览 -->
              <div v-if="item.code === 100" class="overture overture100">
                <MyProposalView
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 邀请附议人 -->

              <div v-if="item.code === 150" class="overture overture100">
                <MyInviteSecondedt
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 待团长审核 -->
              <div v-if="item.code === 200" class="overture overture200">
                <MyProposalAudit
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 预审核 -->
              <div v-if="item.code === 250" class="overture overture250">
                <MyPreAudit
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 待立案审核 -->
              <div v-if="item.code === 300" class="overture overture300">
                <MyRegisterAudit
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 待执委会审核 -->
              <div v-if="item.code === 350" class="overture overture350">
                <MyUnionChairman
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 待领导审批立案 -->
              <div v-if="item.code === 400" class="overture overture400">
                <MyLeadershipAudit
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 校长、书记审阅 -->
              <div v-if="item.code === 450" class="overture overture450">
                <MyPresidentCheckAudit
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 待确认承办单位 -->
              <div v-if="item.code === 500" class="overture overture500">
                <MyConfirmUnit
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 待承办单位答复 -->
              <div v-if="item.code === 550" class="overture overture550">
                <MyUnitReply
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 待领导审批答复 -->
              <div v-if="item.code === 600" class="overture overture600">
                <MyLeaderReply
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 待反馈评价 -->
              <div v-if="item.code === 650" class="overture overture650">
                <MyFeedback
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 委员会审查 -->
              <div v-if="item.code === 750" class="overture overture750">
                <MyCouncilExaminefrom
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 待提案委员会填写完结意见 -->
              <div v-if="item.code === 800" class="overture overture800">
                <MyCompletedOpinion
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
              <!-- 办结 -->
              <div v-if="item.code === 999" class="overture overture800">
                <MyConclude
                  :overture="overture"
                  :code="item.code"
                  :sign="item.sign"
                  :title="item.title"
                  :behindData="codeListReverse[index]"
                />
              </div>
            </div>
          </div>
        </div>
      </template>
    </MyLayout>
  </a-spin>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, nextTick } from "vue";
import { getOverture, getOvertrueConfig } from "@/api/overtrue";

import {
  ArrowLeftOutlined,
  ExclamationCircleOutlined,
  ClockCircleOutlined,
} from "@ant-design/icons-vue";
import MyLayout from "@/components/layout/index.vue";
import MyProposalView from "./components/proposalAuditState/proposalView.vue";
import MyProposalAudit from "./components/proposalAuditState/delegationAudit.vue";
import MyInviteSecondedt from "./components/proposalAuditState/inviteSeconded.vue";
import MyPreAudit from "./components/proposalAuditState/preAudit.vue";
import MyRegisterAudit from "./components/proposalAuditState/registerAudit.vue";
import MyUnionChairman from "./components/proposalAuditState/unionChairmanAudit.vue";
import MyLeadershipAudit from "./components/proposalAuditState/leadershipAudit.vue";
import MyPresidentCheckAudit from "./components/proposalAuditState/presidentCheckAudit.vue";
import MyConfirmUnit from "./components/proposalAuditState/confirmUnit.vue";
import MyUnitReply from "./components/proposalAuditState/unitReply.vue";
import MyLeaderReply from "./components/proposalAuditState/leaderReply.vue";
import MyFeedback from "./components/proposalAuditState/feedback.vue";
import MyCouncilExaminefrom from "./components/proposalAuditState/councilExamine.vue";
import MyCompletedOpinion from "./components/proposalAuditState/completedOpinion.vue";
import MyConclude from "./components/proposalAuditState/conclude.vue";
import { throttle, debounce } from "lodash";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
const route = useRoute();
onMounted(() => {
  spinning.value = true;
  /** 获取提案的全部配置信息 */
  getOvertrueConfig().then((OvertrueConfig: any) => {
    getOverture({ _id: route.params.id as string }).then((res: any) => {
      spinning.value = false;
      // 根据页面的query参数去获取当前id的提案全部信息 并赋值
      overture.value = res.data.data[0];
      // 因为timeline组件需要反转 所以先把数据赋值一份未反转的
      codeListReverse.value = OvertrueConfig.data.data.filter(
        (item: any) => item.status
      );
      // 然后把数据浅拷贝并反转赋值
      codeList.value = [...codeListReverse.value].reverse();

      /** 判断是否未预览 如果为预览就只显示意见处理的提案页面 */
      if (route.params.view) {
        codeListReverse.value = codeListReverse.value.filter(
          (item: any) => item.code < res.data.data[0].code
        );
      } else {
        codeListReverse.value = codeListReverse.value.filter(
          (item: any) => item.code <= res.data.data[0].code
        );
      }
      // 根据此提案的code状态去找到匹配的索引并赋值
      currentIndex.value = codeList.value.findIndex(
        item => item.code === overture.value.code
      );
      /** 使用以上找到的索引调用已经节流过的函数 把指针调整到对应的位置上 */
      handleMouseOver(
        overture.value.code === 999
          ? currentIndex.value + 1
          : currentIndex.value
      );
      /** 使用以上找到的索引调用已经节流过的函数 把右边页面的内容滚动到指定的页面 */
      scrollBoxScroll(
        overture.value.code === 999
          ? currentIndex.value + 1
          : currentIndex.value
      );
      /** 判断是否为不允许立案直接跳的办结 如果是将  currentIndex.value 定为300的状态码位置*/
      if (!res.data.data[0].determineRegister) {
        timeLineClick(codeList.value.findIndex(item => item.code === 300));
        codeListReverse.value = codeListReverse.value.filter(
          (item: any) => item.code < 350
        );
      }
    });
  });
  // 监听右边内容滚动盒子的滚动事件 并触发已经节流过的函数
  scroll.value.addEventListener("scroll", throttleHandleScroll);
});
/** 提案的全部状态信息 */
const codeList = ref<any[]>([]);
/** 提案的全部状态信息（未反转） */
const codeListReverse = ref<any[]>([]);
/** 当前提案的全部数据 */
const overture = ref<any>();

/** 是否显示加载中效果 */
const spinning = ref(false);
/** 是否显示箭头 */
const isShowArrow = ref(true);
/** 根据索引去更新箭头的位置功能 */
const X = ref(0);
const Y = ref(0);
/** 当前的页面的默认指针位置以及滚动容器的默认滚动位置 */
const currentIndex = ref<null | number>(null);
/** 获取时间轴的全部dom元素 */
const timeLineRef = ref<any>(null);
/** 切换箭头的显示与隐藏 */
const changeLayput = (isShow: boolean) => (isShowArrow.value = isShow);

/** handleMouseOver调用此函数需要传递index索引 触发后会把指针移动到指定位置 isScroll是否需要反转索引 */
const handleMouseOver = async (index: any, isScroll?: boolean) => {
  await nextTick();
  if (!isScroll) index = codeList.value.length - index - 1;

  const rect = timeLineRef.value![index].$el.getBoundingClientRect();
  X.value = rect.x;
  Y.value = rect.y;
};
/** handleMouseOut 鼠标立刻timeline时间轴后触发的事件 根据指定index恢复到默认的位置 */
const handleMouseOut = () => {
  if (scrollIndex !== null) {
    handleMouseOver(scrollIndex.value, true);
    return;
  }
  handleMouseOver(currentIndex.value);
};
// 节流和防抖函数
const throttleHandleMouseOver = throttle(handleMouseOver, 100);
const debounceHandleMouseOut = debounce(handleMouseOut, 1000);

/** 右边内容的滚动功能全部参数 */
/** scroll 滚动的主容器 */
const scroll = ref();
/** scroll 滚动的全部子容器 */
const scrollItem = ref();
/** scrollIndex 滚动容器的索引 */
const scrollIndex = ref<null | number>(null);
/** scroll 主滚动后触发的事件 判断滚动到了哪个盒子 并把scrollIndex索引赋值 */
const handleScroll = () => {
  for (let i = 0; i < scrollItem.value.length; i++) {
    const box = scrollItem.value[i];
    const rect = box.getBoundingClientRect();
    if (isInViewport(rect)) {
      // 当前盒子可见，执行相应操作
      scrollIndex.value = i;
      handleMouseOver(scrollIndex.value, true);
    }
  }
};
const throttleHandleScroll = debounce(handleScroll, 100);
const isInViewport = (rect: any) => {
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

const timeLineClick = (index: number) => {
  scrollIndex.value === index;
  scrollBoxScroll(index);
};

const scrollBoxScroll = async (index: number) => {
  let i = codeList.value.length - index - 1;
  if (i > codeListReverse.value.length - 1) {
    message.warning("流程未达到哦");
    return;
  }
  await nextTick();
  scrollItem.value[i].scrollIntoView({
    behavior: "smooth",
  });
};
onBeforeUnmount(() => {
  scroll.value.removeEventListener("scroll", throttleHandleScroll);
});
</script>

<style scoped lang="less">
.pointer {
  transition: all 0.4s;
}
.timeline {
  cursor: pointer;
  &:hover {
    transition: all 0.4s;
    color: #1890ff;
  }
}
.scrollItem {
  height: 100%;
  scroll-snap-align: center;
  transition: all 0.6s;
}
.covetureBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 0.6s;
}
.scroll {
  transition: all 0.6s;
  height: 100%;
  max-height: 200%;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}
:deep(.ant-timeline-item) {
  padding-bottom: 27px;
}

.overture {
  display: flex;
  height: 100%;
  align-items: center;
  transform: translateY(-50px);
}
:deep(.ant-form-item) {
  margin-bottom: 15px;
}
:deep(.anticon-exclamation-circle) {
  color: #cf1322;
}
</style>
